<template>
<div>
        <!-- <div class="nav"></div> -->

    <div class="bodyBanner">

        <div class="headerCenter">
            <header class="header">
            <!-- 头部的第一行 -->
            <div class="top">
                <div class="container">
                    <div class="loginList">
                        
                         <router-link class="listChild"  to="/home"><span @click="btn1"  class="loginTO" >军事动态</span></router-link>
                         <router-link class="listChild"  to="/search"> <span @click="btn1"  class="loginTO" >文献报告</span></router-link>
                       
                    </div>
                    
                    <div class="bottom">
                <!-- <h1 class="logoArea">
                   
                    <router-link class="logo" title="尚品汇"   to="/home">
                        <img src="./images/logo.png" alt="">
                    </router-link>
                </h1> -->
                 <div v-show="isShow" style="position:relative;" class="searchArea">
                 <form  action="###" class="searchForm1" >
                        <input type="text" id="autocomplete" class="input-error input-xxlarge" 
                        placeholder="请输入关键字搜索"
                        v-model="keyword"
                        />
                       
                        <button class="sui-btn btn-xlarge btn-danger" type="button" 
                        @click="goSearch"
                        >搜索</button>
                    </form>
                    </div>
               
            </div>

                   
                    <div class="typeList">
                         
    
                       
                         <iframe  style="position:absolute;top:-20px;px;left:-350px; padding-top: 20px;padding-left: 20px;"  scrolling="no" height="54"  frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=10&icon=1&num=3&color=ffffff"></iframe>
                       <router-link class="listChild" to="/center/myorder"><el-button type="primary">我的</el-button></router-link>
                       <router-link class="listChild" to="/shopcart"><el-button>退出</el-button></router-link>
                        
                    </div>
                    
                     
                          
                   
                </div>
            </div>
            <!--头部第二行 搜索区域-->
            
        </header>
  </div>
   <div v-show="isShow1" style="position:relative;" >
                     <!-- <img style="position:absolute;top:-22px;left:-299px;" src="./images/logo.png" alt=""> -->
                    <form action="###" class="searchForm">
                        <input type="text" id="autocomplete" class="input-error input-xxlarge" 
                        placeholder="请输入关键字搜索"
                        v-model="keyword"
                        />
                       
                        <button class="sui-btn btn-xlarge btn-danger" type="button" 
                        @click="goSearch"
                        >搜索</button>
                    </form>
                </div>
</div>
</div>

  
</template>


<script>
import {mapState} from 'vuex'
import $ from 'jquery'
$(document).on("scroll",function(){
	if($(document).scrollTop()>300){ 
		$(".bodyBanner").stop().animate({
			height:'50px',
            
            
		});
        
    //     $(".searchForm").hide({
    //         duration: 1000,
    // });
    //     $(".searchForm1").show({
    //         duration: 1000,
    // });
    //     if($(document).scrollTop()<=300){ 
    //        $(".searchForm1").hide({
    //         duration: 1000,
    // });
    //     }
        // $(".searchForm").css("display","none" );
    
        
	}else{
		$(".bodyBanner").stop().animate({
			height:'300px'
		});
    //      $(".searchForm").show({
    //         duration: 1000,
    // });
    //  $(".searchForm1").hide({
    //         duration: 1000,
    // });
       
	}		
});
export default {
  name: '',
  data(){
      return{
          keyword:'',
          isActive:-1,
          isShow:false,
          isShow1:true,      }
  },

  mounted(){
      this.$bus.$on('changeKeyword',()=>{
          this.keyword = ''
      })
  },
  created() {
   //添加滚动监听事件
   //在窗口滚动时调用监听窗口滚动方法
   window.addEventListener('scroll', this.windowScrollListener);
},

destroyed() {
   //离开页面时删除该监听
   window.removeEventListener('scroll', this.windowScrollListener)
},
  methods:{
    //监听窗口滚动
windowScrollListener() {
  //获取操作元素最顶端到页面顶端的垂直距离
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  if (scrollTop >= 300) {
    this.isShow = true; //大于300时显示元素
    this.isShow1 = false;
   
  }
  if (scrollTop < 300) {
    this.isShow = false; //小于300时隐藏元素
    var that = this;
   
         that.isShow1 = true; //小于300时显示元素
   
   
   
  }
},

    btn1(a){
        this.isActive = true;
        console.log(a)
    },
    // btn2(b){
    //     console.log(b)
    //     this.isActive = true


    // },
      goSearch(){
        //   this.$router.push({name:'search',params:{keyValue:this.keyValue||undefined},query:{k:this.keyValue.toUpperCase()}})
        if(this.$route.query){
           let location =  {name:'search1',params:{keyword:this.keyword||undefined}}
           location.query = this.$route.query
           if(this.$route.path !='/home'){
               this.$router.replace(location)
           }else{
                this.$router.push(location)
           }
           

        }
          
      },
      logout(){
          this.$store.dispatch('getlogout')
      }
  },
  computed:{
      ...mapState({
          userInfo:state=>state.user.userInfo
      })
  }
  }
</script>

<style scoped lang="less">
*{ margin:0; padding:0; list-style:none;}
body{ height:2000px;}
// .nav{width:100%; height:300px;position:fixed; left:0; top:0; z-index:9999; background:url(./images/body_banner.png) no-repeat center; }
.bodyBanner{
    // background: url(./images/body_banner.png) ;
    width:100%; height:300px;position:fixed; left:0; top:0; z-index:1000; background:url(./images/body_banner.png) no-repeat center; 
    
    .searchForm {
        position:absolute;
        top: 0px;
        left:0px;
                    overflow: hidden;
                    margin-top: 180px ;
                    display: flex;
                    input {
                        box-sizing: border-box;
                        width: 25vw;
                        height: 32px;
                        padding: 0px 4px;
                        border: 2px solid #ea4a36;
                        float: left;

                        &:focus {
                            outline: none;
                        }
                    }

                    button {
                        height: 32px;
                        width: 68px;
                        background-color: #ea4a36;
                        border: none;
                        color: #fff;
                        float: left;
                        cursor: pointer;

                        &:focus {
                            outline: none;
                        }
                    }
                }
    .headerCenter{
    // background: url(./images/banner1.png) no-repeat center;

      .header {
        height:120px;
           
        &>.top {
           
       position: fixed;
                    z-index: 100;
    //                       background-color: #ffffff;
    // box-shadow: 5px 16px 20px 2px rgb(231 232 234 / 46%);
            // opacity: 0.8;
            height: 50px;
            line-height: 50px;
            width: 100%;
            .bottom {

            
            overflow: hidden;
            height:300px;
                position: absolute;
             left: 30vw;
             top: -27px;
                 
            .searchArea {
                // float: right;
              
                margin-top: 35px;
                
                
                .searchForm1 {
                    overflow: hidden;
                    
                    display: flex;
                    input {
                        box-sizing: border-box;
                        width: 25vw;
                        height: 32px;
                        padding: 0px 4px;
                        border: 2px solid #ea4a36;
                        float: left;

                        &:focus {
                            outline: none;
                        }
                    }

                    button {
                        height: 32px;
                        width: 68px;
                        background-color: #ea4a36;
                        border: none;
                        color: #fff;
                        float: left;
                        cursor: pointer;

                        &:focus {
                            outline: none;
                        }
                    }
                }
            }
        }
           

            .container {
                

                .loginList {
                    margin-left:30px;
                    float: left;
                    
                    .loginTO{
                        font-size: 18px;
                        margin-right:20px;
                        
                    }
                    .loginTO1{
                        display: inline-block;
                       width: 113px;
                       height: 37px;
                      line-height: 37px;
                       text-align: center;
                     font-size: 18px;
                    color: #ffffff;
                      background-color: rgba(120, 160, 187, 0.2);
                     border-radius: 6px;
                      font-weight: bold;
                      transition: 0.3s all;
                     text-decoration: none;

                    }
                        
                  
                }
                .typeList{
                    float:right;
                    position: relative;
                    .listChild{
                        margin-right:10px;
                        color: #000;
                    }   
                   
                }
               

            }
        }

        
    }


}
}

     
  
</style>
